<template>
  <div class="userEdit-page">
    <van-nav-bar
      class="navBar-parts"
      title="编辑中心"
    >
       <div slot="left" class="left-return" @click="$router.back()">
          <van-icon name="arrow-left" />
          <span class="left-text">返回</span>
       </div>
    </van-nav-bar>
    <input 
      type="file"
      hidden
      ref="fileDOM"
      @change="onReplaceImg"
      >
    <van-cell-group inset class="infoBar">
      <van-cell title="头像" class="infoBarCll" @click="$refs.fileDOM.click()">
      <template #right-icon>
        <img :src="UserInfoList.photo" alt="" class="touxiang">
        <van-icon name="arrow" />
      </template>
      
      </van-cell>
      <van-cell title="名称" class="infoBarCll" @click="namePageShow = true">
        <template #right-icon>
          <span class="BarCllText">{{UserInfoList.name}}</span>
          <van-icon name="arrow" />
        </template>
        </van-cell>
        <van-cell title="性别" class="infoBarCll" @click="genderPageShow = true">
          <template #right-icon>
            <span class="BarCllText">{{UserInfoList.gender == 0? '男' : '女'}}</span>
            <van-icon name="arrow" />
          </template>
        </van-cell>
        <van-cell title="手机号" class="infoBarCll">
          <template #right-icon>
            <span class="BarCllText">{{UserInfoList.mobile}}</span>
            <van-icon name="arrow" />
          </template>
        </van-cell>
      <van-cell title="出生日期" class="infoBarCll" @click="datePageShow = true">
      <template #right-icon>
        <span class="BarCllText">{{UserInfoList.birthday}}</span>
        <van-icon name="arrow" />
      </template>
      </van-cell>
      <van-cell title="个人简介" class="infoBarCll" @click="IntroduceShow = true">
      <template #right-icon>
        <div class="jianjieText">
          <span class="BarCllText">{{OwnInfoList.intro}}</span>
        </div>
        <van-icon name="arrow" />
      </template>
      </van-cell>
    </van-cell-group>
    

    <!-- 头像选项卡 -->
    <van-popup 
    v-model="imgPageShow"  
    position="bottom" 
    :style="{ height: '100%'}"
    >
      <userEditImg
      v-if="imgPageShow"
      :img="img"
      @user-photo="UserInfoList.photo = $event.data"
      @close="imgPageShow = false"
      />
    </van-popup>

    <!-- 性别选项卡 -->
    <van-popup v-model="genderPageShow" round position="bottom" >
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="genderPageShow = false"
        @confirm="onConfirm"
        title="性别"
        @change="onchange"
        :default-index="this.UserInfoList.gender"
      />
    </van-popup>

    <!-- 日期选项卡 -->
    <van-popup v-model="datePageShow" round position="bottom" >
    <van-datetime-picker
      v-if="datePageShow"
      v-model="currentDate"
      type="date"
      title="选择年月日"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="onDateEdit"
      @cancel="datePageShow = false"
    />
    </van-popup>

       <!-- 名称选项卡 -->
      <van-popup  
      v-model="namePageShow" 
      position="bottom" 
      :style="{height: '100%',backgroundColor: '#f5f5f5'}">
        <userEditName
         v-model="UserInfoList.name"
         @close="namePageShow = false"
        />
      </van-popup>


      <!-- 简介选项卡 -->
      <van-popup
       v-model="IntroduceShow"
       position="bottom"
       :style="{height: '100%', backgroundColor: '#f5f5f5'}"
      >
        <userIntroduce 
        v-model="OwnInfoList.intro"
        @close="IntroduceShow = false"
        />
      </van-popup>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getUserMyProfile, patchEditUserProfile,getUserMyData} from '@/service/getDate'
import userEditImg from '@/page/my/children/children/userEditImg.vue'
import userEditName from '@/page/my/children/children/userNameEdit.vue'
import userIntroduce from '@/page/my/children/children/userIntroduce.vue'
export default {
    name: 'UserEditPage',
    data () {
      return {
        UserInfoList: [], // 用户个人资料
        OwnInfoList: [], // 用户自己的信息
        imgPageShow: false, // 头像编辑的开关
        datePageShow: false, // 日期编辑开关
        genderPageShow: false, // 性别编辑的开关
        IntroduceShow: false, // 简介编辑开关
        namePageShow:false, // 名称编辑开关
        genderChoose: null, // 性别选项
        img:null,
        columns: ['男', '女'],
        minDate: new Date(1990,0,1) , // 设置选项卡其实的时间
        maxDate: new Date(), // 设置选项卡最终的时间 也就是截至到今天的时间
        currentDate: new Date(), // 设置一个当前已经选择的时间
      }
    },
   
    mounted() {
      this.genderChoose = this.UserInfoList.gender
      this.getUserInfo()
      this.getUserOwnInfo()
    },
    components: {
      userEditImg,
      userEditName,
      userIntroduce
    },
    methods: {
     async getUserInfo(){
        try {
          const {data} = await getUserMyProfile()
          this.UserInfoList = data.data
          // console.log(data)
          this.currentDate = new Date(this.UserInfoList.birthday)
          console.log(this.UserInfoList);
        } catch (err) {
          console.log(err)
        }
      },
      async getUserOwnInfo() {
       try {
        const {data} = await getUserMyData()
        this.OwnInfoList = data.data
        console.log(this.OwnInfoList);
       }catch (err) {
        console.log(err)
       }
        
      },
      async onConfirm() {
        this.$toast.loading({
          message: '更改中...',
          duration:0,
          forbidClick: true
        })
          try{
           await patchEditUserProfile({ 
            gender: this.genderChoose
           })
           this.UserInfoList.gender = this.genderChoose
           this.$toast.success('修改成功')
          } catch (err) {
            console.log(err);
            this.$toast.fail('修改失败')
          }
          
            this.genderPageShow = false
    },
        onReplaceImg() {
          const fileDOM = this.$refs.fileDOM.files[0] // 获取已选中的图片
          let fileImg = window.URL.createObjectURL(fileDOM)
          this.img = fileImg
          this.imgPageShow = true
          // this.$refs.fileBtn.value = ''
        },
        onchange(key, value, index) {
          this.genderChoose = index
        },
       async onDateEdit() {
        this.$toast.loading({
          message: '更改中...',
          duration:0,
          forbidClick: true
        })
          try {
            const userBirthday =  dayjs(this.currentDate).format('YYYY-MM-DD') // 转化成字符串
            await patchEditUserProfile({
              birthday: userBirthday
            })
            this.UserInfoList.birthday = userBirthday
            this.$toast.success('修改成功')
          }catch(err) {
            console.log(err);
            this.$toast.fail('修改失败')
          }
          this.datePageShow = false
        }
    }
}
</script>

<style lang="scss" scoped>
   .userEdit-page {
   .left-return {
      display: flex;
      justify-content: center;
      align-items: center;
     
      .van-icon {
        font-size: 35px;
        color: #fff;;
      }
      .left-text {
        font-size: 30px;
        color: #fff;
      }
    }
   /deep/ .infoBar {
      .infoBarCll {
        align-items: center;
         .touxiang{
              width: 100px;
              height: 100px;
              border-radius: 50%;
              overflow: hidden;
              background-color: #3333;
        }
      
        .BarCllText {
           color: #999;
        }
        .van-icon-arrow {
          font-size: 30px;
        }
       
      }
     /deep/ .infoBarCll:nth-of-type(6) {
        height: 110px;
          .jianjieText{
            width: 300px;
            // overflow:auto;
            word-wrap: break-word;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; //这儿的数字代表的就是你所需要实现效果的第N行
            -webkit-box-orient: vertical;
              .BarCllText {
                text-align: right !important;
              }
          }
      }
    }
   }
</style>